<template>
	<view class="content">
		<view class="top_swiper">
			<!-- 返回 -->
			<swiper class="swiper_index" :indicator-dots="false" @change="change">
				<swiper-item v-for="(item,index) in banner">
					<view class="swiper-item">
						<image class="swiper_pic" :src="item" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
			<!-- 图片数量 -->
			<view class="currNum">{{currIndex}}/{{banner.length}}</view>
		</view>
		<view class="auctionPrice">
			<view class="sign iconfont">&#xe604;</view>
			<view class="price">{{auctionDatas.price}}</view>
		</view>
		<view class="goods_name">{{yxAuctionProductDto.title}}</view>
		<view class="goods_introl">{{yxAuctionProductDto.productInfo}}</view>
		<view class="goods_detail">商品详情</view>
		<view class="detail_cont">
			<rich-text :nodes="productDetail"></rich-text>
		</view>
		
		<!-- <view class="fixed" v-if="yxAuctionOrder.status == 2">
			<view class="fixedcont"  >
				<view class="ficedfl" @click="popup">
					<image class="iconservice" src="https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/service.png" mode=""></image>
					<view class="servicetxt">客服</view>
				</view>
				<view class="fixed_user" >
					<view class="sponsor" @click="getSponsor(yxAuctionOrder)">发起转拍</view>
					<view class="takegoods" @click="goTakeGoods(yxAuctionOrder)">立即收货</view>
				</view>
			</view>
		</view>
		<view v-else-if="yxAuctionOrder.status == 4" class="fixedfr fixedfrColor">您已确认收货，交易已完成</view>
		<view v-else class="fixedfr" @click="getOperate(yxAuctionOrder.status,yxAuctionOrder.id)">{{yxAuctionOrder.status | filterResult}}</view> -->
		
		<!-- 拨打客服电话 -->
		<!-- <view class="tuiPop" v-show="popupShow == true" @click="close"></view>
		<view class="tuipopcont" v-show="popupShow == true">
			<view class="getPhone" @click="goPhone(phone)"><text style="color: #333333;">拨打电话：</text>{{phone}}</view>
			<view class="cancel" @click="close">取消</view>
		</view> -->
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popupShow:false,
				id:'',
				auctionDatas:{},
				banner:[],
				currIndex:1,
				yxAuctionProductDto:{},
				phone:'',
				yxAuctionOrder:{},
				productDetail:''
			}
		},
		onLoad(options) {
			console.log(options)
			this.id = options.id
			this.getDetailInfo()
			let that = this;
			uni.$on('goTake',function(data){
			    console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
				that.getDetailInfo()
			})
		},
		filters:{
			filterResult: function (e) {
				if (e == 0) {
					return '待付款'
				} else if (e == 1) {
					return '您已付款，等待卖家确认收款'
				} else if (e == 3){
					return '确认收货'
				} 
			}
		},
		methods: {
			// 轮播改变
			change: function (e) {
				// console.log(e)
				this.currIndex = e.detail.current + 1
			},
			// 返回
			back: function () {
				uni.navigateBack({
					delta: 1
				});
			},
			// 抢拍操作
			getOperate: function (status,id) {
				let that = this;
				let price = that.yxAuctionOrder.price;  
				let sid = that.auctionDatas.id; //抢拍id
				if (status == 0) {   // 待付款
					uni.navigateTo({
						url: '../../../home/auctionPayment/auctionPayment?money=' + price + '&id=' + sid + '&buyId=' + id,
					});
					setTimeout(function () {
						uni.$emit('goTake',{msg:'页面更新'});
						uni.$emit('update',{msg:'页面更新'})
						uni.$emit('billOrder',{msg:'页面更新'})
					},500)
					
				} else if (status == 1) {  // 您已付款，等待卖家确认收款
					that.tui.toast('您已付款，等待卖家确认收款');
					return
				} else if (status == 3) {
					that.api.userGetConfirm(id).then(res => {
						console.log(res)
						that.tui.toast(res.data);
						setTimeout(function () {
							uni.$emit('goTake',{msg:'页面更新'});
							uni.$emit('update',{msg:'页面更新'})
							uni.$emit('billOrder',{msg:'页面更新'})
						},500)
					})
				} 
				
			},
			// 点击获取客服电话
			popup: function() {
				this.getPhone()
				this.popupShow = !this.popupShow
			},
			close: function () {
				this.popupShow = !this.popupShow
			},
			// 发起转拍
			getSponsor: function (yxAuctionOrder) {
				uni.navigateTo({
					url: '../../../home/sponsorPay/sponsorPay?serviceMoney=' + yxAuctionOrder.serviceMoney + '&id=' + yxAuctionOrder.id,
				});
			},
			// 确认订单
			goTakeGoods: function (yxAuctionOrder) {
				uni.navigateTo({
					url: '../../../home/sureAuctionOrder/sureAuctionOrder?id=' + yxAuctionOrder.id,
				});
			},
			// 获取详情
			getDetailInfo: function () {
				this.api.buyBillOrderDetail(this.id).then(res => {
					console.log(res)
					let datas = res.data;
					if (datas.yxAuctionProductDto.slideImg != '') {
						this.banner = datas.yxAuctionProductDto.slideImg.split(";")
					} else {
						this.banner = []
					}
					// let productDetail = datas.yxAuctionProductDto.productDetail.splice()
					this.yxAuctionProductDto = datas.yxAuctionProductDto;
					this.yxAuctionOrder = datas.yxAuctionOrder;
					let detail = datas.yxAuctionProductDto.productDetail.replace(/[ \t]*width[ \t]*=[ \t]*("[^"]+")|('[^']+')/ig,"");
					let details = detail.replace(/[ \t]*height[ \t]*=[ \t]*("[^"]+")|('[^']+')/ig,"");
					this.productDetail = details.replace(/<img /g, '<img width="100%"');
					this.auctionDatas = datas;
					console.log(this.yxAuctionProductDto.productDetail,"------")
				})
			},
			// 获取客服电话
			getPhone: function () {
				let code = 'kfdh'
				this.api.getServiceTel(code).then(res => {
					console.log(res)
					this.phone = res.data.memo
				})
			},
			// 拨打电话
			goPhone: function (phone) {
				uni.makePhoneCall({
				    phoneNumber: phone //仅为示例
				});
			}
			
			
		} 
	}
</script>

<style lang="less">
	page {
		width: 100%;
		box-sizing: border-box;
		letter-spacing: 3rpx;
		font-size: 30rpx;
		color: #212121;
		background: #FFFFFF;
	}
	.content {
		width: 100%;
		box-sizing: border-box;
	}
	.top_swiper {
		width: 100%;
		box-sizing: border-box;
		// height: 750rpx;
		position: relative;
		.swiper_index {
			width: 100%;
			box-sizing: border-box;
			height: 750rpx;
			.swiper-item {
				width: 100%;
				height: 100%;
				.swiper_pic {
					width: 100%;
					height: 100%;
				}
			}
		}
		.back {
			font-size: 70rpx;
			position: absolute;
			left: 20rpx;
			top: 60rpx;
			z-index: 15;
			color: rgba(0, 0, 0, 0.41);
		}
		.currNum {
			position: absolute;
			right: 20rpx;
			bottom: 80rpx;
			font-size: 26rpx;
			color: #FFFFFF;
			width: 80rpx;
			line-height: 35rpx;
			text-align: center;
			background: rgba(0, 0, 0, 0.41);
			border-radius: 9rpx;
			z-index: 15;
		}
		.swiper_bot {
			width: 100%;
			box-sizing: border-box;
			line-height: 72rpx;
			background: rgba(0, 0, 0, 0.4);
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 15;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0 36rpx;
			.boticon {
				width: 28rpx;
				height: 28rpx;
			}
			.bottxt {
				width: calc(100% - 28rpx);
				box-sizing: border-box;
				padding-left: 20rpx;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
		
	}
	.auctionPrice {
		width: 100%;
		box-sizing: border-box;
		padding: 22rpx 36rpx;
		line-height: 87rpx;
		color: #E42221;
		font-size: 62rpx;
		display: flex;
		justify-content: flex-start;
		.sign {
			font-size: 32rpx;
			color: #FFDA71;
			padding-top: 10rpx;
		}
		
	}
	.goods_name {
		width: 100%;
		box-sizing: border-box;
		padding: 0 36rpx 40rpx 36rpx;
		border-bottom: 2rpx solid #F3F6F6;
		font-weight: 500;
	}
	.goods_introl {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 36rpx;
		font-size: 26rpx;
		color: #212121;
	}
	
	.goods_detail {
		width: 100%;
		box-sizing: border-box;
		line-height: 64rpx;
		text-align: center;
		font-size: 24rpx;
		color: #999999;
		background: #F5F5F5;
	}
	.detail_cont {
		width: 100%;
		box-sizing: border-box;
		// padding: 20rpx 20rpx 150rpx 20rpx;
		padding: 20rpx;
	}
	.fixed {
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		padding: 16rpx 30rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		.fixedcont {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			.fixed_user {
				width: 552rpx;
				line-height: 82rpx;
				text-align: center;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				.sponsor {
					width: 266rpx;
					box-sizing: border-box;
					line-height: 80rpx;
					border: 2rpx solid #C7973B;
					border-radius: 8rpx;
					color: #C7973B;
				}
				.takegoods {
					width: 266rpx;
					box-sizing: border-box;
					line-height: 80rpx;
					border: 2rpx solid #E42221;
					border-radius: 8rpx;
					color: #FFFFFF;
					background: #E42221;
				}
			}
			.ficedfl {
				width: calc(100% - 552rpx);
				box-sizing: border-box;
				text-align: center;
				.iconservice {
					width: 46rpx;
					height: 46rpx;
					margin: 0 auto;
				}
				.servicetxt {
					font-size: 22rpx;
					color: #666666;
					line-height: 30rpx;
				}
				
			}
		}
		
	}
	.fixedfr {
		width: 100%;
		box-sizing: border-box;
		background: #E42221;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		line-height: 112rpx;
		color: #FFFFFF;
		text-align: center;
		&.fixedfrColor {
			background: #FFFFFF;
			color: #212121;
		}
	}
	.tuiPop {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 996;
		transition: all 0.3s ease-in-out;
	}
	.tuipopcont {
		width: 100%;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 998;
		// transform: translate3d(0, 100%, 0);
		transform-origin: center;
		transition: all 0.3s ease-in-out;
		padding: 30rpx;
		.cancel {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
			background: #FFFFFF;
			line-height: 100rpx;
			border-radius: 12rpx;
			color: #E42221;
			font-size: 30rpx;
		}
		.getPhone {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
			background: #FFFFFF;
			line-height: 100rpx;
			border-radius: 12rpx;
			color: #E42221;
			font-size: 30rpx;
			margin-bottom: 30rpx;
		}
	}
	

</style>
